<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-08-04 16:47:38
 * @LastEditors: charles
 * @LastEditTime: 2021-12-09 11:36:44
-->
<template>
  <div class="briup_drawer">
    <el-drawer
      :size="width" 
      :title="title"
      :visible.sync="visible">
      
      <!-- 中间插槽 -->
      <div class="briup_drawer_content">
        <slot name="content"></slot>
      </div>
      <!-- 底部插槽 -->
      <div class="briup_drawer_footer">
        <slot name="footer"></slot>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  // 期待接受的参数
  props:["drawerVisible","title","subtitle","width"],
  computed:{
    visible:{
      get(){
        return this.drawerVisible;
      },
      set(val){
        this.$emit('on-change-visible',val)
      }
    }
  },
  methods:{
   
  }
}
</script>
<style scoped>
.briup_drawer_header  {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 2em;
}
.subtitle {
  font-size: 10px;
}
.briup_drawer_content {
  padding: 2em 1em ;
  
}
.briup_drawer_content .info {
  line-height: 3em;
  background-color: #f4f4f4;
}
.briup_drawer_footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
  border-top: 1px solid #ededed;
}
</style>
